<template>
  <div style="width: 500px; height: 200px">
    <div class="mapp" ref="baiduRef">
      <div class="content"></div>
    </div>
    <ul class="btn-wrap" style="z-index: 99">
      <li class="light btn">司机:{{ datatable.name }}</li>
      <li class="night btn">
        司机电话:{{ router.currentRoute.value.query.phone}}
      </li>
      <li class="night btn">
        路线：{{ router.currentRoute.value.query.route }}
      </li>
     
    </ul>
  </div>
</template>
<script setup>
import { useRouter } from "vue-router";
import request from "@/utils/request";
import { onMounted, ref, onUnmounted } from "vue";
// 地图嵌入
const router = useRouter();
const datatable = ref({
  //启动经纬度
  startLocationLongitude: "",
  startLocationLatitude: "",
});
const datatable2 = ref({
  //司机当前经纬度
  longitude: "",
  latitude: "",
});
const baiduRef = ref();
const map = ref();
const point = ref();
const myIcon = ref();
const top_left_navigation = ref();
const myCity = ref();
//起点，终点和路线
const p1 = ref();
const p2 = ref();
//没有终点坐标
const p3 = ref();
const driving = ref();
const driving2 = ref();
const pts = ref();
const paths = ref();
const carMk = ref();
console.log(router.currentRoute.value.query.id);
function initMap(lng = 80.55, lat = 41.1) {
  map.value = new BMap.Map(baiduRef.value);
  point.value = new BMap.Point(lng, lat);
  myCity.value = new BMap.LocalCity();
  map.value.centerAndZoom(point.value, 80);
  map.value.enableScrollWheelZoom(true);
  // map.openInfoWindow(infoWindow,point); //开启信息窗口
  // 创建比例尺控件并添加到地图
  top_left_navigation.value = new BMap.ScaleControl({
    anchor: BMAP_ANCHOR_TOP_LEFT,
  });
  map.value.addControl(top_left_navigation.value);
  // 设置地图样式
  map.value.setMapStyleV2({
    styleId: "1fb853a740649182c004c7f05e3f1ac7",
  });
  // 初始化起点和终点坐标
  p1.value = new BMap.Point(
    datatable.value.startLocationLongitude,
    datatable.value.startLocationLatitude
  );
  p2.value = new BMap.Point(80.29, 41.15);
  myIcon.value = new BMap.Icon(
    //图片
    "https://img1.imgtp.com/2023/10/07/I9RTjgQm.png",
    new BMap.Size(100, 100),
    {
      //offset: new BMap.Size(0, -5),    //相当于CSS精灵
      imageOffset: new BMap.Size(0, 0), //图片的偏移量。为了是图片底部中心对准坐标点。
    }
  );
  // 创建驾车路线规划对象
  driving.value = new BMap.DrivingRoute(map.value, {
    renderOptions: {
      map: map.value,
      autoViewport: true,
    },
  });
  // 执行路线规划搜索
  driving.value.search(p1.value, p2.value);
  map.value.addEventListener("click", function (e) {
    // Display alert with latitude and longitude
    alert("当前车辆位置是" + e.point.lng + ", " + e.point.lat);
  });
  console.log(datatable.value.startLocationLatitude);
}
function resetMkPoint(i = 0) {
  if (i < paths.value) {
    setTimeout(() => {
      carMk.value.setPosition(pts.value[i]);
      resetMkPoint(i + 1);
    }, 100);
  }
}

onMounted(() => {
  // 封装代码为一个函数
  function fetchData() {
    request
      .get(`/manager/queryById/${router.currentRoute.value.query.id}`)
      .then((result) => {
        if (result.success) {
          datatable.value = result.data;
          initMap();
        }
      });
    driving2.value = new BMap.DrivingRoute(map.value);
    driving2.value.search(p1.value, p2.value);
    driving2.value.setSearchCompleteCallback(() => {
      // pts.value = driving2.value
      //   .getResults()
      //   .getPlan(0)
      //   .getRoute(0)
      //   .getPath();
      // paths.value = pts.value.length;
      request.get(`/manager/VehicleTripLocationById/${router.currentRoute.value.query.id}`).then((result) => {
        if (result.success) {
          datatable2.value = result.data;
        }
      });
      p3.value = new BMap.Point(
        datatable2.value.longitude,
        datatable2.value.latitude
      );
      carMk.value = new BMap.Marker(p3.value, { icon: myIcon.value });
      map.value.addOverlay(carMk.value);
      // resetMkPoint();
    });
  }
  // 立即执行一次
  fetchData();
  // 每隔10秒执行一次
  setInterval(fetchData, 20000);

  // 当组件销毁时，清除定时器，防止内存泄漏
  onUnmounted(() => {
    clearInterval(setInterval(fetchData2, 20000));
    // 清除 fetchData 的定时器
  });
});
</script>

<style scoped>
.homebox {
  width: 100%;
  height: 100vh;

  position: relative;
}
.head {
  height: 100px;
  background: #071f4d;
}
.headimg {
  width: 100%;
  height: 100%;
}
.mapp {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 100px;
}
.content {
  height: calc(100vh - 100px);
  display: flex;
}
ul li {
  list-style: none;
}
.btn-wrap {
  z-index: 999;
  position: fixed;
  top: 5.5rem; /* Adjust the top position as needed */
  right: 1rem; /* Adjust the right position as needed */
  padding: 1rem;
  border-radius: 0.25rem;
  background-color: #fff;
  box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}

.btn-wrap ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.btn {
  width: 200px;
  height: 30px;
  background-color: #fff;
  color: rgba(27, 142, 236, 1);
  font-size: 14px;
  border: 1px solid rgba(27, 142, 236, 1);
  border-radius: 5px;
  margin: 0 0 5px 0;
  text-align: left;
  line-height: 30px;
}

.btn:hover {
  background-color: rgba(27, 142, 236, 0.8);
  color: #fff;
}
</style>
